<script setup lang="ts">
import { defineModel, ref } from 'vue'

const emit = defineEmits<{
  (e: 'change', value: number): void
}>()

const activeTab = defineModel<number>({
  default: 1,
})

const tabs = ref([
  { label: '待上课', value: 1 },
  { label: '已上课', value: 2 },
])

function handleTabChange(tab: number) {
  activeTab.value = tab
  emit('change', tab)
}
</script>

<template>
  <view class="tabs">
    <view
      v-for="tab in tabs" :key="tab.value" class="tab" :class="{ active: activeTab === tab.value }"
      @click="handleTabChange(tab.value)"
    >
      {{ tab.label }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.tabs {
  display: flex;
  border-bottom: 2rpx solid #eee;

  .tab {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;

    &.active {
      color: #333;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: -2rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #f6a035;
        border-radius: 4rpx;
      }
    }
  }
}
</style>
